import React from "react";
import {
  Layout,
  Typography,
  Card,
  Row,
  Col,
  Table,
  Button,
  InputNumber,
  Space,
} from "antd";
import styles from "./index.module.less";

const { Title, Text } = Typography;

interface PanelData {
  key: string;
  panelName: string;
  taskType: React.ReactNode;
  valueColumn: React.ReactNode;
  action: React.ReactNode;
}

const AnalysisDetail: React.FC = () => {
  const columns = [
    {
      title: "面板名称",
      dataIndex: "panelName",
      key: "panelName",
    },
    {
      title: "任务类型",
      dataIndex: "taskType",
      key: "taskType",
    },
    {
      title: "价值列",
      dataIndex: "valueColumn",
      key: "valueColumn",
    },
    {
      title: "操作",
      dataIndex: "action",
      key: "action",
    },
  ];

  const data: PanelData[] = [
    {
      key: "1",
      panelName: "开发板 (开发)",
      taskType: (
        <Space data-oid="fc7iyt.">
          <span data-oid="mlhhhy0">代码检视</span>
          <span data-oid="uqmtj0n">缺陷</span>
          <span data-oid="tvxjm4h">事项</span>
          <span data-oid="mgv_nxq">特性/特性功能</span>
        </Space>
      ),

      valueColumn: (
        <Space direction="vertical" data-oid="-w5mcbl">
          <span data-oid="73ddg3v">待办(Backlog)</span>
          <span data-oid="7a1auak">分析设计(预研&估点；测试案例)</span>
          <span data-oid="r38sz4c">
            开发自测(待开发；开发中；开发完成；结卡失败/需二次结卡)
          </span>
          <span data-oid="q-2ws3b">联调()</span>
          <span data-oid="-phlwrm">
            ST测试(待测试；测试中；案例未通过；阻碍；测试完成)
          </span>
          <span data-oid="qho87_f">UAT测试()</span>
          <span data-oid="3sin0:c">投产(待投产)</span>
          <span data-oid="tfjp7zw">结项()</span>
          <span data-oid="kc-wjfv">完成(完成)</span>
        </Space>
      ),

      action: (
        <Button type="link" data-oid="bs_hquk">
          编辑
        </Button>
      ),
    },
  ];

  return (
    <Layout className={styles.container} data-oid="qqjl94k">
      <div className={styles.header} data-oid="szv318e">
        <Title level={4} data-oid=":tmbazp">
          看板管理
        </Title>
        <Text data-oid="j4lcymq">前往【精益之星-看板管理系统】修改</Text>
      </div>
      <Row gutter={16} data-oid="-i2yxrh">
        <Col span={12} data-oid="oomdvyu">
          <Card title="看板信息" className={styles.card} data-oid="z9v-yfh">
            <div className={styles.infoItem} data-oid="1p6h.by">
              <Text strong data-oid="oum6c_i">
                看板负责人：
              </Text>
              <Text data-oid="jyetb5a">王宇壮/80276430</Text>
            </div>
            <div className={styles.infoItem} data-oid="j35mkxt">
              <Text strong data-oid="0:73el7">
                看板名称：
              </Text>
              <Text data-oid="mgfjyp1">电子看板开发组</Text>
            </div>
            <div className={styles.infoItem} data-oid="pso8rq7">
              <Text strong data-oid="36nxce9">
                WIP设置：
              </Text>
              <Text data-oid="0pe6:xi">每个资源最多能点亮的任务卡数：</Text>
              <InputNumber
                min={1}
                max={10}
                defaultValue={3}
                data-oid="vas41bw"
              />
            </div>
            <Button
              type="primary"
              className={styles.updateButton}
              data-oid=".y2_c3b"
            >
              更新
            </Button>
          </Card>
        </Col>
        <Col span={12} data-oid="san8h4f">
          <Card title="面板管理" className={styles.card} data-oid="xs3s0ac">
            <Table
              columns={columns}
              dataSource={data}
              pagination={false}
              bordered
              className={styles.table}
              data-oid="19x1hcy"
            />
          </Card>
        </Col>
      </Row>
    </Layout>
  );
};

export default AnalysisDetail;
